require(['./config'], () => {
    require(['template', 'request', 'right_border', 'footer', 'header', 'zoom', 'fly',], (template, request, right_border) => {
        class Detail {
            constructor() {
                this.init()
                // this.lastindex = 0,
                // this.index = 0
            }

            init() {
                //取id
                const id = window.location.search.slice(4)
                request.getDetail(id).then(resp => {
                    if(resp.code === 200) {
                        const { detail } = resp.data
                        const {
                            id,
                            title,
                            price,
                            originPrice,
                            photo,
                            saleNum,
                            descContentList,
                            commodityTypeName,
                            couponStatus,
                            accessoryHints,
                            introduction
                        } = detail
                        //把所有必须的数据统一整理起来，将来模板引擎的传输以及购物车加入的逻辑更加轻量化
                        this.detail = {
                            id,
                            title,
                            price,
                            originPrice,
                            photo,
                            saleNum,
                            descContentList,
                            commodityTypeName,
                            couponStatus,
                            accessoryHints,
                            introduction
                        }
                        this.detail.descContentList = this.detail.descContentList.filter(item => {
                            if(item.type === 1) {
                                return true
                            }
                            return false
                        })
                        console.log(this.detail)
                        $('#list_show').html(template('show_render', {
                            ...this.detail
                          }))
                        // 要等到数据渲染完成以后才能调用放大功能
                        this.zoom()
                        this.shopping_num()
                        this.add_to_cart()
                        // this.calimg()
                    } else {
                        alert('没有这个商品')
                        location.replace('http://localhost:1908/html/rim_list.html#1?start=0&sort=0')
                    }
                })
            }
            // next() {
            //     this.lastindex = this.index
            //     this.index++
                
            //     $('#showimg').css('left', - (this.index * this.width))
            //     if(this.index === this.led) {
            //         $('#showimg').css('left', 0 + 'px')
            //         this.index = 0
            //     }
            // }
            //商品图片轮播
            // calimg() {
            //     this.width = parseInt($('#showimg').find('img').eq(0).css('width'))
            //     this.$li = $('#showimg').children('li')
            //     this.led = this.$li.length
            //     let _this = this
            //     $('#showimg').css('width', _this.led * _this.width + 'px')
            //     // $('#showimg').hover(function() {
            //     //     clearTimeout(this.timer)
            //     // }, this.next())
            //     this.timer = setInterval(function() {
            //         _this.next()
            //     }, 3000)
            // }


            zoom () {
                $('.zoom-image').elevateZoom({
                  gallery: 'gal1'
                })
              }

            //数量选择
            shopping_num() {
                var num = $('#num').val()
                $('#num-jia').on('click', () => {
                    num++
                    $('#num').val(`${num}`)
                })
                $('#num-jian').on('click', () => {
                    num--
                    if(num === 0) {
                        num = 1
                    } else {
                        $('#num').val(`${num}`)
                    }
                })
            }

            //加入购物车
            add_to_cart() {
                $('.shopping').on('click', '#add-to-cart-btn', e => {
                    //抛物线飞入效果
                    this.fly(e)
                    // 把this.detail加入购物车存localStorage
                    // 先取，如果有值的话应该追加当前数据，再重新存一遍覆盖之前的
                    let cartList = localStorage.getItem('cart')
                    if(cartList) {
                        //代表已经存过购物车
                        cartList = JSON.parse(cartList)
                        const isExist = cartList.some(item => {
                            return item.id === this.detail.id
                        })
                        if(isExist) {
                            // 代表当前商品已经存在在购物车里
                            // 一般如果要修改数组里的元素，用map
                            var num = $('#num').val()
                            cartList = cartList.map(item => {
                                if(item.id === this.detail.id) {
                                    num = parseInt(item.num) + parseInt(num)
                                    item.num = num
                                }
                                return item
                            })
                        } else {
                            //购物车里没有当前数据，就push购物车里需要存的数据
                            cartList.push({
                                id: this.detail.id,
                                title: this.detail.title,
                                price : this.detail.price,
                                originPrice: this.detail.originPrice,
                                photo: this.detail.photo[0],
                                saleNum: this.detail.saleNum,
                                // 第一次存的时候默认加入一条商品
                                num: 1,
                                check: true
                            })
                        }
                        localStorage.setItem('cart', JSON.stringify(cartList))
                    } else {
                        //第一次存
                        var num = $('#num').val()
                        localStorage.setItem('cart', JSON.stringify([{
                            id: this.detail.id,
                            title: this.detail.title,
                            price : this.detail.price,
                            originPrice: this.detail.originPrice,
                            photo: this.detail.photo[0],
                            saleNum: this.detail.saleNum,
                            // 第一次存的时候默认加入一条商品
                            num: num,
                            check: true
                        }]))
                    }
                } )
                
            }
            // 加入购物侧回调函数
            destroy() {
                $('#destroy').html(`${$('#destroy').html + 1}`)
                console.log(1)
            }
            //加入购物车特效
            fly(e) {
                $(`<img src="${this.detail.photo[0].url}" style="width: 30px; height: 30px; z-index: 999; border-radius:50%;">`).fly({
                    start:{
                        left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                        top: e.clientY,  //开始位置（必填）
                      },
                      end:{
                        left: $(window).width() - 40, //结束位置（必填）
                        top: 470,  //结束位置（必填）
                      },
                      speed: 0.3, //越大越快，默认1.2
                      vertex_Rtop: 30, //运动轨迹最高点top值，默认20
                      onEnd: function(){
                        this.destroy()
                        $('#carNum').html(`${right_border.getcarNum() - 0 }`)
                        // console.log(right_border.getcarNum())
                        // 购物车数量修改
                      } //结束回调
                    });
            }

        }
        new Detail()
    })
})